<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo layui-hide-xs layui-bg-black">后台管理系统</div>
				<!-- 头部区域（可配合layui 已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<!-- 移动端显示 -->
						<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
						<i class="layui-icon layui-icon-spread-left"></i>
					</li>

					<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
					<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
					<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
					<li class="layui-nav-item">
						<a href="javascript:;">nav groups</a>
						<dl class="layui-nav-child">
							<dd><a href="">menu 11</a></dd>
							<dd><a href="">menu 22</a></dd>
							<dd><a href="">menu 33</a></dd>
						</dl>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item layui-hide layui-show-md-inline-block">
						<a href="javascript:;">
							<img  class="layui-nav-img">
							tester
						</a>
						<dl class="layui-nav-child">
							<dd><a href="">Your Profile</a></dd>
							<dd><a href="">Settings</a></dd>
							<dd><a href="">Sign out</a></dd>
						</dl>
					</li>

				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">menu group 1</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;">menu 1</a></dd>
								<dd><a href="javascript:;">menu 2</a></dd>
								<dd><a href="javascript:;">menu 3</a></dd>
								<dd><a href="">the links</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">menu group 2</a>
							<dl class="layui-nav-child">
								<dd><a href="javascript:;">list 1</a></dd>
								<dd><a href="javascript:;">list 2</a></dd>
								<dd><a href="">超链接</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
						<li class="layui-nav-item"><a href="">the links</a></li>
					</ul>
				</div>
			</div>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div class="layui-card layui-panel">
					<div class="layui-card-header">
						<span class="layui-breadcrumb">
						  <a href="">首页</a>
						  <a href="">国际新闻</a>
						</span>
					</div>
					<div class="layui-card-body">
		充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
					</div>
				</div>
				<!-- 内容主题区域结束 -->
			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				<p align="center">@</p>
			</div>
		</div>
		<script src="layui/layui.js"></script>
		<script>
			//JS 
			layui.use(['element', 'layer'], function() {
				var element = layui.element,
					layer = layui.layer
			});
		</script>
	</body>
</html>
